<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:12px;
            font-family:"幼圆",Helvetica,Arial,sans-serif;
        }
        html{
            width:100%;
            height:100%;
            overflow-x:hidden;
            overflow-y:auto;
        }
        #login_big{
            width:100%;
            height:100%;
            background-color: #0eac9f;
            background-size:cover;
            overflow:hidden;
        }
        #login{
            width:350px;
            height:380px;
            background:#ffffff;
            box-sizing:border-box;
            float: left;
            margin-left: 150px;
            border-radius: 6px;
        }
        #login_msg{
            margin-top: -25px;
        }
        #login input{
            border:1px solid #000;
            vertical-align:middle;
            border-radius:3px;
            height:45px;
            padding:0 16px;
            font-size:18px;
            outline:0;
            width:75%;
            margin: 3px 40px;
            box-sizing:border-box;
        }
        #login input[type=email],#login input[type=file],#login input[type=password],#login input[type=text],select{
            border:1px solid #DCDEE0;
            opacity:0.6;
        }
        #login input[type=email]:focus,#login input[type=file]:focus,#login input[type=password]:focus,#login input[type=text]:focus,select:focus{
            border:1px solid #A5809F;
            opacity:0.8;
        }
        #login input[type=button],#login input[type=submit]{
            display:inline-block;
            padding:12px 24px;
            margin:8px 56px;
            line-height:24px;
            text-align:center;
            font-size: 20px;
            white-space:nowrap;
            vertical-align:middle;
            cursor:pointer;
            color:#fff;
            background-color:#A5809F;
            border:none;
            -webkit-appearance:none;
            width:68%
        }
        .space{
            height:20px;
            width:100%
        }
        #canvas{
            width: 136px;
            height: 45px;
            display: inline-block;
            border:  1px solid #c9c9c9;
            border-radius: 5px;
            cursor: pointer;
            margin: -21px 1px;
            background-color: white;
        }
        .image{
            float: left;
            margin-left: 150px;
        }
        .login_logo {
            width: 90px;
            height: 90px;
            border: 5px solid #0eac9f;
            border-radius: 100px;
            background: #fff;
            text-align: center;
            line-height: 110px;
            position: relative;
            top: -50px;
            left: 125px;
        }
        #box{
            width: 1300px;
            margin: 0 auto;
        }
    </style>
</head>
<body id="login_big">
    <div id="box">
        <img src="/image/login-img.png" class="image" style="margin-top: 10%"/>
        <div id="login" style="margin-top: 12%">
            <div class="login_logo">
                <i class="layui-icon layui-icon-username" style="font-size: 50px; color: #0eac9f;position: absolute;left: 20px;top: -10px;"></i>
            </div>
            <div id="login_msg"></div>
            <span></span>
            <form class="layui-form" action="/login" method="post">
                <input type="text" placeholder="用户名" name="account" lay-verify="required"/>
                <div class="space"></div>
                <input type="password" placeholder="密码" name="password" lay-verify="required"/>
                <div class="space"></div>
                <input maxlength="4" type="text"id="verificationCode" style="height:45px;width: 30%;margin-right: 12px" placeholder="验证码" name="verificationCode" lay-verify="required"/>
                <canvas id="canvas" >
                </canvas>
                <input type="hidden" id="verification" name="verification">
                <input lay-submit lay-filter="login" id="loginSiYun" style="display: none;" type="submit" value="登录"/>
                <input type="button" id="loginButton" value="登录" style="margin-top: 20px;background-color: #0eac9f;"/>
            </form>
        </div>
    </div>
</body>
    <script  src="/js/login/login.js"></script>
    <script>
        if(window!=top)top.location.href = location.href;
    </script>
    <!-- returnCitySN获取本地的ip和地区 -->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script>
        layui.use('layer',function () {
            var layer = layui.layer;
            layer.ready(function(){
                layer.msg('此账号被封禁！');
            });
        })
    </script>
</html>